import React, {Component} from 'react';
import {StyleSheet, View, StatusBar} from 'react-native';
import {Header, Left, Body, Right, Button, Icon, Title, Text} from 'native-base';
import {themeColor, themTextColor, Constants} from '../../../../config/config';
import {Actions} from 'react-native-router-flux';

const styles = StyleSheet.create({
	container: {
		backgroundColor: themeColor(), 
		paddingTop: Constants.statusBarHeight, 
		height: Constants.statusBarHeight + 50,
	},
	leftContainer: {
		flex: 1,
	},
	centerContainer: {
		flex: 1, 
		flexDirection: 'row',
	},
	rightContainer: {
		flex: 1,
	},
	title: {
		flex: 1, 
		textAlign: 'center',
		color: themTextColor(),
	},
	icon: {
		color: themTextColor(),
	}
});

class Nav extends Component {
	
	render() {
		let {hiddenBack, title, leftContent, rightContent} = this.props;
		let leftContentNode = leftContent;
		let rightContentNode = rightContent;
		if(!leftContentNode && !hiddenBack) {
			leftContentNode = (
				<Button transparent onPress={() => {
					Actions.pop();
				}}>
	              	<Icon style={styles.icon} name='arrow-back' />
	            </Button>
			);
		}
		return (
			<Header style={styles.container} noShadow={true} hasTabs={this.props.hasTabs}>
				<StatusBar animated={true} translucent={true} barStyle='light-content' />
	          	<Left style={styles.leftContainer}>
		            {leftContentNode}
	          	</Left>
	          	<Body style={styles.centerContainer}>
	            	<Title style={styles.title}>{title}</Title>
	          	</Body>
	          	<Right style={{flex: 1}}>
		           {rightContentNode}
	          	</Right>
	        </Header>
		)
	}
	
}

export default Nav;
